<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="icon/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .all {
            width: 350px;
            height: 380px;
            margin: 100px auto;
            border: 1px solid pink;
            font-size: 14px;
        }
        .top {
            width: 100%;
            height: 150px;
            background: linear-gradient(blue, skyblue);
            position: relative;
        }
        .lt {
            float: left;
        }
        .gt {
            float: right;
        }
        .cl {
            width: 70px;
            height: 70px;
            background-color: skyblue;
            border-radius: 50%;
            position: absolute;
            left: 140px;
            bottom: -35px;
            overflow: hidden;
        }
        img {
            width: 70px;
            height: 70px;
        }
        .bottom {
            text-align: center;
            margin-top: 20px;
        }
        a {
            text-decoration: none;
            color: gray;
        }
        .one, .two {
            width: 250px;
            height: 30px;
            margin-top: 20px;
        }
        .iconfont {
            font-size: 28px;
            vertical-align: bottom;
        }
        .box3, .box4 {
            margin-top: 20px;
        }
        span {
            margin: 0 26px;
        }
        .box4 input {
            width: 250px;
            height: 30px;
            background-color: skyblue;
            border-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="top">
            <div class="lt">
                <i class="iconfont" style="color: white; font-size: 24px;">&#xe882;</i>
                <span style="color: white; margin: 0; font-size: 18px;">QQ</span>
            </div>
            <div class="gt">
                <i class="iconfont" style="font-size: 24px;">&#xe8b7;</i>
                <i class="iconfont" style="font-size: 24px;">&#xe63b;</i>
                <i class="iconfont" style="font-size: 24px;">&#xe60e;</i>
            </div>
            <div class="cl">
                <img src="qq.webp" alt="">
            </div>
        </div>
        <div class="bottom">
            <div class="box1">
                <i class="iconfont">&#xe882;</i>
                <input class="one" type="text" placeholder="qq号码/手机/邮箱">
                <i class="iconfont">&#xe62d;</i>
            </div>
            <div>
                <i class="iconfont">&#xe8b2;</i>
                <input class="two" type="password" placeholder="密码">
                <i class="iconfont">&#xe99e;</i>
            </div>
            <div class="box3">
                <input type="checkbox" name="" value="自动登录">自动登录
                <span><input type="checkbox" name="" value="记住密码">记住密码</span>
                <a href="#">找回密码</a>
            </div>
            <div class="box4">
                <input type="submit" value="安全登录">
            </div>
        </div>
    </div>
    
</body>
</html>